import 'package:flutter/material.dart';
import 'package:flutter/src/foundation/key.dart';
import 'package:flutter/src/widgets/framework.dart';

class FirstGuidPage extends StatefulWidget {
  const FirstGuidPage({Key? key}) : super(key: key);

  @override
  State<FirstGuidPage> createState() => _FirstGuidPageState();
}

class _FirstGuidPageState extends State<FirstGuidPage> {
  int _currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;
    return Scaffold(
      backgroundColor: Colors.white,
      body: Stack(
        children: [
          Positioned.fill(
            child:PageView(
              onPageChanged: (value){
                setState(() {
                  _currentIndex = value;
                });
              },
              children: [
                Image.asset("assets/sp01.png",width: width,height:height,fit: BoxFit.fill),
                Image.asset("assets/sp02.png",width: width,height:height,fit: BoxFit.fill),
                Image.asset("assets/sp03.png",width: width,height:height,fit: BoxFit.fill),
                Image.asset("assets/sp04.png",width: width,height:height,fit: BoxFit.fill),
              ],
            ),
          ),
          Positioned(
            left: 0,
            right: 0,
            bottom:60,
            height: 44,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                buildIndefot(_currentIndex ==0),
                buildIndefot(_currentIndex ==1),
                buildIndefot(_currentIndex ==2),
                buildIndefot(_currentIndex ==3),

              ],
            )
            ),
            // 去首页
            Positioned(
              left: 0,
              right: 0,
              bottom: 60,
              height: 44,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  AnimatedContainer(duration: Duration(milliseconds: 800),
                  height: _currentIndex == 3?44:0,
                  width: _currentIndex==3?120:0,
                  child: ElevatedButton(
                    child: Text("去首页"),
                    onPressed: (){
                      print("点击去首页");
                    },
                  ),
                  )
                ],
              )
              )
        ],
      ),
    );
    
  }
  Widget buildIndefot(bool isSelect){
    return AnimatedContainer(
      height: 12,
      width: isSelect?40:12,
      duration: Duration(milliseconds: 800),
      decoration: BoxDecoration(
        color:Colors.deepOrangeAccent,
        borderRadius: BorderRadius.all(Radius.circular(10))
      ),
      );
  }
}